<template>
	<div class="bg-[#C1A879]">
		<div class="container mx-auto flex flex-col items-center justify-center space-y-5 py-5 max-md:px-2">
			<div class="grid grid-cols-2 py-20 max-md:py-0 w-full max-md:grid-cols-1 gap-5">
				<div class="col-span-1 grid grid-cols-3 max-xl:grid-cols-1 max-md:hidden">
					<div class="col-span-1"></div>
					<div class="col-span-1 flex flex-col gap-2 text-white cursor-pointer">
						<span class="text-base" @click="goto('/goods')">{{ lg === 0 ? "Product center" : lg === 1 ? "产品中心" : "產品中心" }} </span>
						<span class="text-gray-200" v-for="(i, index) in goods" @click="goto(i.url)" :key="index">{{ i.typename }}</span>
					</div>
					<div class="col-span-1 flex flex-col gap-2 text-white cursor-pointer">
						<span class="text-base" @click="goto('/new')">{{ lg === 0 ? "News trends" : lg === 1 ? "新闻动态" : "新聞動態" }} </span>
						<span class="text-gray-200" v-for="(i, index) in news" @click="goto(i.url)" :key="index">{{ i.typename }}</span>
					</div>
				</div>

				<div class="hidden max-md:block">
					<div class="flex flex-col justify-start gap-5">
						<div class="flex flex-col text-white col-span-1">
							<span>{{ lg === 0 ? "Online message" : lg === 1 ? "在线留言" : "在線留言" }} </span>
						</div>
						<div class="grid grid-cols-2 gap-10">
							<div class="col-span-1 flex flex-col gap-3 text-white items-start">
								<span>{{ lg === 0 ? "Mailbox" : lg === 1 ? "称呼" : "稱呼" }} </span>
								<div class="bg-[#CCB893] rounded-md text-white w-full py-1 cursor-pointer flex justify-center items-center">
									<input
										type="text"
										v-model="name"
										class="py-1 px-1 bg-transparent border-none text-white focus:!border-[#C1A879] w-full"
										placeholder=""
									/>
								</div>

								<span>{{ lg === 0 ? "Customized" : lg === 1 ? "手机号码" : "手機號碼" }}</span>
								<div class="bg-[#CCB893] rounded-md text-white w-full py-1 cursor-pointer flex justify-center items-center">
									<input
										type="text"
										v-model="number"
										class="py-1 px-1 text-base bg-transparent border-none text-white focus:border-[#C1A879] w-full"
										placeholder=""
									/>
								</div>
								<div class="border rounded-md text-white w-full py-1 cursor-pointer flex justify-center items-center mt-6" @click="tijoao">
									{{ lg === 0 ? "submit" : lg === 1 ? "提交" : "提交" }}
								</div>
							</div>
							<div class="col-span-1 flex flex-col gap-3 text-white justify-center items-center" v-if="$store.state.web_attr.wechat_qrcode && lg">
								<img v-viewer v-lazy="img + $store.state.web_attr.wechat_qrcode" style="width: 80px" class="aspect-square bg-gray-500" alt="" />
								<span>联系电话</span>
								<span class="text-xs">{{ $store.state.web_attr.tel }}</span>
							</div>
							<div class="col-span-1 flex flex-col gap-3 text-white items-center" v-if="!lg">
								<div class="flex gap-3">
									<a :href="$store.state.web_attr.Twitter">
										<img
											src="https://dsfw.oss-cn-shanghai.aliyuncs.com/baolian/202309202104379.png"
											alt=""
											class="aspect-square"
											style="width: 40px"
										/>
									</a>
									<a :href="$store.state.web_attr.Facebook">
										<img
											src="https://dsfw.oss-cn-shanghai.aliyuncs.com/baolian/202309202104271.png"
											alt=""
											class="aspect-square"
											style="width: 40px"
										/>
									</a>
								</div>
								<span class="hidden-1 mt-6">{{ $store.state.web_attr.tel }}</span>
								<span class="hidden-1">{{ $store.state.web_attr.email }}</span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-span-1 grid-cols-3 w-full justify-between flex flex-col gap-5 max-md:hidden">
					<div class="flex flex-col text-white col-span-1">
						<span> {{ lg === 0 ? "Online message" : lg === 1 ? "在线留言" : "線上留言" }}</span>
					</div>
					<div class="grid grid-cols-3 gap-5">
						<div class="text-white col-span-1 flex justify-between gap-1 items-center">
							<div class="border-b inline-flex items-center">
								<span class="block whitespace-nowrap">{{ lg === 0 ? "mailbox" : lg === 1 ? "称呼" : "稱呼" }}</span>
								<input
									type="text"
									v-model="name"
									class="py-3 px-1 bg-transparent border-none text-white focus:!border-[#C1A879] w-full"
									placeholder=""
								/>
							</div>
						</div>
						<div class="text-white col-span-1 flex justify-between gap-1 items-center">
							<div class="border-b flex items-center">
								<span class="block whitespace-nowrap"> {{ lg === 0 ? "requirements" : lg === 1 ? "手机号码" : "手機號碼" }}</span>
								<input
									type="text"
									v-model="number"
									class="py-3 px-1 text-base bg-transparent border-none text-white focus:border-[#C1A879] w-full"
									placeholder=""
								/>
							</div>
						</div>

						<!-- 微信图片 -->
						<div class="col-span-1 flex flex-col items-center justify-start relative group" v-if="lg">
							<img src="https://dsfw.oss-cn-shanghai.aliyuncs.com/baolian/202309202047066.png" class="w-[50px] aspect-auto cursor-pointer" alt="" />
							<div
								class="absolute -bottom-[110px] rounded-md left-50 bg-white group-hover:block transition-all duration-300 hidden gap-1 justify-center overflow-hidden items-center p-1"
							>
								<div class="flex justify-center" v-if="$store.state.web_attr.wechat_qrcode">
									<img v-viewer v-lazy="img + $store.state.web_attr.wechat_qrcode" style="width: 80px" class="aspect-square bg-gray-500" alt="" />
								</div>
								<span class="text-xs">{{ $store.state.web_attr.tel }}</span>
							</div>
						</div>
						<div class="col-span-1 flex flex-col relative group gap-3 text-white" v-if="!lg">
							<div class="flex gap-3">
								<a :href="$store.state.web_attr.Twitter">
									<img src="https://dsfw.oss-cn-shanghai.aliyuncs.com/baolian/202309202104379.png" alt="" class="aspect-square" style="width: 40px" />
								</a>
								<a :href="$store.state.web_attr.Facebook">
									<img src="https://dsfw.oss-cn-shanghai.aliyuncs.com/baolian/202309202104271.png" alt="" class="aspect-square" style="width: 40px" />
								</a>
							</div>
							<span class="hidden-1">{{ $store.state.web_attr.tel }}</span>
							<span class="hidden-1">{{ $store.state.web_attr.email }}</span>
						</div>
					</div>
					<div class="">
						<div class="border shadow-md text-white px-10 py-2 cursor-pointer inline-flex" @click="tijoao">
							{{ lg === 0 ? "submit" : lg === 1 ? "提交" : "提交" }}
						</div>
					</div>
				</div>
			</div>
			<span class="w-full border-b max-md:hidden"></span>
			<div class="text-white flex gap-5">
				<span v-html="$store.state.web_attr.web_copyright"></span>
				<a href="https://beian.miit.gov.cn/" v-if="lg == 1" target="_blank">蜀ICP备2023038504号</a>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			name: "",
			number: "",
			goods: [],
			news: []
		};
	},

	created() {
		this.config();
		this.index();
		console.log("lg==> ", this.lg);
	},
	watch: {
		// "$store.state.menuItems"(newValue, oldValue) {
		// 	newValue.forEach((e) => {
		// 		if (e.typename == "产品中心") {
		// 			this.goods = e.child;
		// 		}
		// 		if (e.typename == "新闻动态") {
		// 			this.news = e.child;
		// 		}
		// 	});
		// }
	},
	methods: {
		async index() {
			const [err, res] = await this.$to(this.$axios.get("&a=menu"));
			if (err) return this.$message.error(err);
			if (res.code == 0) return this.$message.error(res.msg);
			// this.menuItems = res.data;

			res.data.forEach((e) => {
				if (e.url === "/guanyu") {
					e.url = `/guanyu?lang=${this.lg ? "cn" : "en"}`;
				}
				if (e.url === "/lianxi") {
					e.url = `/lianxi?lang=${this.lg ? "cn" : "en"}`;
				}

				if (e.url === "/goods") {
					e.show = false;
					this.goods = e.child;
					e.child.forEach((ee) => {
						ee.url = `/goods?id=${ee.id}&lang=${this.lg ? "cn" : "en"}`;
					});
				}

				if (e.url === "/new") {
					this.news = e.child;
					e.show = false;
					e.child.forEach((ee) => {
						ee.url = `/new?id=${ee.id}&lang=${this.lg ? "cn" : "en"}`;
					});
				}

				if (e.url === "/") {
					e.url = "/";
				}
			});

			this.menuItems = res.data;

			this.$store.commit("set_menuItems", res.data);
		},
		async config() {
			const [err, res] = await this.$to(this.$axios.get("&a=tagglobal"));
			if (err) return this.$message.error(err);
			if (res.code == 0) return this.$message.error(res.msg);
			this.$store.commit("set_web_attr", res.data.web_attr);
		},
		goto(e) {
			if (e) {
				this.$router.push(e);
			}
		},
		async tijoao() {
			if (this.lg) {
				if (!this.name) {
					this.$message.error("填写称呼");
					return;
				}
				const regexname = /[\u4e00-\u9fa5]+/;
				if (!regexname.test(this.name)) {
					this.$message.error("填写中文汉字");
					return;
				}
				if (!this.number) {
					this.$message.error("填写手机号码");
					return;
				}
				const regexnumber = /^1[3456789]\d{9}$/;
				if (!regexnumber.test(this.number)) {
					this.$message.error("手机格式不正确");
					return;
				}
			} else {
				// Mailbox
				// Customized
				if (!this.name) {
					this.$message.error("Please fill in the Mailbox");
					return;
				}

				const regexname = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
				if (!regexname.test(this.name)) {
					this.$message.error("Please fill in the correct email");
					return;
				}

				if (!this.number) {
					this.$message.error("Please fill in the Customized");
					return;
				}

				const regexnumber = /^[a-zA-Z]+$/;
				if (!regexnumber.test(this.number)) {
					this.$message.error("Please fill in the English");
					return;
				}
			}
			let data = {
				attr_1: this.name,
				attr_2: this.number,
				typeid: 5
			};

			var queryString = "?" + new URLSearchParams(data).toString();
			console.log(queryString);
			const [err, res] = await this.$to(this.$axios.post("&a=gbook_submit", data));
			if (err) return this.$message.error(err);
			if (res.code == 0) return this.$message.error(res.msg);
			this.$message.success(res.msg);
			this.name = "";
			this.number = "";
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/input {
	background: none !important;
	outline: none !important;
	border: 0px !important;
}
</style>
